<template>
  <div>
    <!-- #region Add User -->

    <!-- #endregion -->

    <el-button type="primary" @click="addUser">添加用户</el-button>
    <!-- #region Dialog -->
    <el-dialog
      title="添加用户"
      :visible.sync="addDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="addFromRef"
        :model="addFrom"
        :rules="addFormRoles"
        label-width="80px"
        status-icon
      >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="addFrom.userName" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="addFrom.password"
            show-password
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="addFrom.confirmPassword"
            show-password
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit('addFromRef')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- #endregion -->
  </div>
</template>

<script>
export default {
  data() {
    const validateFirstChar = (rule, value, callback) => {
      if (/^[a-zA-Z]/.test(value)) {
        callback();
      } else {
        callback(new Error("请以字母开头"));
      }
    };
    const validateName = (rule, value, callback) => {
      if (/^\w+$/.test(value)) {
        callback();
      } else {
        callback(new Error("请输入字母、数字、下划线"));
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.addFrom.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      addDialogVisible: false,
      addFrom: { userName: "", password: "", confirmPassword: "" },
      addFormRoles: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { validator: validateFirstChar, trigger: "blur" },
          {
            min: 5,
            message: "长度在 不小于 5 个字符",
            trigger: "blur",
          },
          {
            max: 15,
            message: "长度在 不大于 15 个字符",
            trigger: "blur",
          },
          { validator: validateName, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            message: "长度在 不小于 6 个字符",
            trigger: "blur",
          },
          {
            max: 15,
            message: "长度在 不大于 15 个字符",
            trigger: "blur",
          },
          { validator: validateName, trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    addUser() {
      this.addDialogVisible = true;
    },
    handleClose() {
      this.$confirm("确认关闭？")
        .then(() => {
          // done();
          this.addDialogVisible = false;
        })
        .catch(() => {});
    },
    onSubmit(formName) {
      console.log(this.$refs[formName]);
      this.$refs[formName].validate(async (valided) => {
        if (!valided) {
          return;
        }
        try {
          let response = await this.$myhttp.post("UserRoles", this.addFrom);
          console.log(response);
          this.addDialogVisible = false;
          this.$message.success("添加成功");
          this.$emit("transferUser", response.data);
          for (const key in this.addFrom) {
            if (Object.hasOwnProperty.call(this.addFrom, key)) {
              this.addFrom[key] = "";
            }
          }
        } catch (error) {
          console.error(error);
        }
      });
    },
  },
};
</script>

<style></style>
